<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>player</title>
</head>
<body>
<div style="width: 500px;">
	<div id="player1"></div>
</div>
<style type="text/css">

	.icon {
		display: inline-block;
		font: normal normal normal 14px/1 icon;
		font-size: inherit;
		text-rendering: auto;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale
	}


	.icon-music:before {
		content: "\f001";
	}

	.icon-search:before {
		content: "\f002";
	}

	.icon-remove:before {
		content: "\f00d";
	}

	.icon-trash:before {
		content: "\f014";
	}

	.icon-repeat:before {
		content: "\f01e";
	}

	.icon-refresh:before {
		content: "\f021";
	}

	.icon-list-alt:before {
		content: "\f022";
	}

	.icon-step-backward:before {
		content: "\f048";
	}

	.icon-fast-backward:before {
		content: "\f049";
	}

	.icon-backward:before {
		content: "\f04a";
	}



	.icon-stop:before {
		content: "\f04d";
	}

	.icon-forward:before {
		content: "\f04e";
	}

	.icon-fast-forward:before {
		content: "\f050";
	}

	.icon-step-forward:before {
		content: "\f051";
	}

	.icon-chevron-left:before {
		content: "\f053";
	}

	.icon-chevron-right:before {
		content: "\f054";
	}

	.icon-remove-sign:before {
		content: "\f057";
	}

	.icon-ok-sign:before {
		content: "\f058";
	}

	.icon-arrow-left:before {
		content: "\f060";
	}

	.icon-arrow-right:before {
		content: "\f061";
	}

	.icon-share-alt:before {
		content: "\f064";
	}

	.icon-exclamation-sign:before {
		content: "\f06a";
	}

	.icon-random:before {
		content: "\f074";
	}

	.icon-retweet:before {
		content: "\f079";
	}


	.icon-long-arrow-left:before {
		content: "\f177";
	}

	.icon-long-arrow-right:before {
		content: "\f178";
	}

	.zplayer ::-webkit-scrollbar {
		width: 3px!important
	}

	.zplayer ::-webkit-scrollbar-track {
		border-radius: 10px!important;
		-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3)!important
	}

	.zplayer ::-webkit-scrollbar-thumb {
		border-radius: 10px!important;
		background: rgba(0,0,0,.1)!important;
		-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.5)!important
	}

	.zplayer ::-webkit-scrollbar-thumb:window-inactive {
		background: rgba(255,0,0,.4)!important
	}

	.zplayer .zplayer-content {
		float: left;
		width: 100%;
		/* border-top: 1px solid #ededed; */
		/* border-bottom: 1px solid #ededed; */
		border: 1px solid #ededed;
		background: #fff;
	}

	.zplayer .ss-btn {
		position: fixed;
		left: 330px;
		float: right;
		width: 20px;
		height: 62px;
		background: #3da0fd none repeat scroll 0 0;
		cursor: pointer;
	}

	.zplayer .ss-btn i {
		margin-top: 1px;
		padding: 0 4px;
		color: #fff;
		font-size: 14px;
		line-height: 62px
	}

	.zplayer {
		float: right;
		color: #6e6e6e;
		font-size: 14px;
		line-height: 19px;
		cursor: pointer;
	}

	.zplayer .zplayer-list {
		clear: both;
		overflow: auto;
		margin: 0;
		padding: 0;
		width: 100%;
		border: 1px solid #dedede;
		border-top: none;
		background: #fff;
		transition: all .5s ease;
	}

	.zplayer .zplayer-list li {
		overflow: hidden;
		padding: 3px 20px;
		color: #878787;
		list-style-position: inside;
		list-style-type: decimal;
		text-overflow: ellipsis;
		font-size: 11px;
		line-height: 1.5;
		cursor: pointer
	}

	.zplayer .zplayer-list li:hover {
		color: #716e6e;
		font-weight: 700
	}

	.zplayer .zplayer-list li.playing {
		padding-left: 17px;
		border-left: 3px solid #3da0ff;
		color: #716e6e;
		font-weight: 700
	}

	.zplayer .display-none {
		display: none
	}

	.zplayer {
		z-index: 1024;
		width: 100%;
		font-family: Arial,Helvetica,sans-serif;
		transition: transform .5s ease;
		transform: translateX(0px);
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}

	.zplayer-fixed .zplayer{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 330px;
	}

	.zplayer span {
		cursor: default!important
	}

	.zplayer .zplayer-pic {
		position: absolute;
		top: 0;
		left: 0;
		width: 62px;
		height: 62px
	}

	.zplayer .zplayer-pic img {
		width: 100%;
		height: 100%
	}

	.zplayer .zplayer-info {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		margin-left: 60px;
		padding: 4px 5px 0 10px;
		height: 60px
	}

	.zplayer .zplayer-info .zplayer-music {
		overflow: hidden;
		margin-bottom: 6px;
		text-overflow: ellipsis;
	}

	.zplayer .zplayer-info .zplayer-music .zplayer-title {
		font-size: 14px
	}

	.zplayer .zplayer-info .zplayer-music .zplayer-author {
		color: #666;
		font-size: 12px
	}

	.zplayer .zplayer-info .zplayer-controller {
		position: relative
	}

	.zplayer .zplayer-info .zplayer-controller .zplayer-bar-wrap .zplayer-bar {
		position: relative;
		width: 100%;
		height: 2px;
		background: #cdcdcd;
		cursor: pointer!important
	}

	.zplayer .zplayer-info .zplayer-controller .zplayer-bar-wrap .zplayer-bar .zplayer-loaded {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		height: 2px;
		background: #aaa;
		-webkit-transition: all .5s ease;
		transition: all .5s ease
	}

	.zplayer .zplayer-info .zplayer-controller .zplayer-bar-wrap .zplayer-bar .zplayer-played,.zplayer .zplayer-volume-played {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		height: 2px;
		background: #3da0ff
	}

	.zplayer .zplayer-info .zplayer-controller .zplayer-bar-wrap .zplayer-bar .zplayer-played .zplayer-thumb,.zplayer .zplayer-volume-thumb {
		position: absolute;
		top: 0;
		right: 5px;
		margin-top: -4px;
		margin-right: -10px;
		width: 8px;
		height: 8px;
		border: 1px solid #3da0ff;
		-webkit-border-radius: 50%;
		border-radius: 50%;
		background: #fff;
		cursor: pointer!important
	}

	.zplayer .zplayer-info .zplayer-controller .zplayer-bar-wrap .zplayer-bar .zplayer-played .zplayer-thumb:hover,.zplayer .zplayer-volume-thumb:hover {
		background: #3da0ff
	}

	.zplayer .zplayer-info .zplayer-controller .zplayer-time {
		margin-top: 12px;
		color: #999;
		font-size: 12px;
	}

	.zplayer .zplayer-info .zplayer-controller .zplayer-time .icon {
		margin-left: 12px;
		width: 14px;
		font-size: 14px;
	}

	.zplayer .zplayer-info .zplayer-controller .zplayer-volume-wrap {
		display: inline-block;
		cursor: pointer!important
	}

	.zplayer .zplayer-info .zplayer-controller .zplayer-volume-wrap:hover .zplayer-volume-bar-wrap {
		display: block
	}

	.zplayer .zplayer-info .zplayer-controller .zplayer-volume-wrap .zplayer-volume-bar-wrap {
		position: absolute;
		right: -5px;
		bottom: 17px;
		z-index: 99;
		display: none;
		width: 25px;
		height: 40px
	}

	.zplayer .zplayer-info .zplayer-controller .zplayer-volume-wrap .zplayer-volume-bar-wrap .zplayer-volume-bar {
		position: absolute;
		right: 10px;
		bottom: 0;
		width: 5px;
		height: 35px;
		background: #aaa
	}

	.zplayer .zplayer-info .zplayer-controller .zplayer-volume-wrap .zplayer-volume-bar-wrap .zplayer-volume-bar .zplayer-volume {
		position: absolute;
		right: 0;
		bottom: 0;
		width: 5px;
		background: #3da0ff
	}

	.zplayer .zplayer-menu-bars {
		display: inline-block;
		margin-left: 4px;
	}

	.zplayer .zplayer-menu-volume {
		float: right;
		display: inline-block
	}

	.zplayer .zplayer-menu-bars i,.zplayer .zplayer-menu-volume i {
		cursor: pointer;
		color: #666;
	}

	.zplayer .zplayer-list-btn:hover,.zplayer .zplayer-menu-bars i:hover,.zplayer .zplayer-menu-volume i:hover {
		color: #000
	}

	.zplayer .zplayer-volume-bar {
		position: relative;
		width: 100%;
		height: 2px;
		background: #cdcdcd;
		cursor: pointer!important
	}

	.zplayer .zplayer-volume-bar {
		position: relative;
		display: inline-block;
		margin-top: -3px;
		margin-left: 4px;
		width: 40px;
		height: 2px;
		background: #cdcdcd;
		vertical-align: middle;
		cursor: pointer!important;
	}

	.zplayer .lrc-hide{
		opacity: 0.5;
	}

	.zplayer-withlrc .zlrc {
		display: block;
	}
	.zplayer-withlrc .zplayer-pic{
		height: 112px;
		width: 112px;
	}
	.zplayer-withlrc .zplayer-info{
		height: 112px;
		margin-left: 112px;
	}

	.zlrc {
		display: none;
		/* position: fixed; */
		/* left: 0; */
		/* bottom: 0; */
		/* width: 100%; */
		/* margin: 5px 20px; */
		background: rgba(255, 255, 255, 0.15);
	}

	.zplayer-lrc {
		position: relative;
		height: 40px;
		text-align: center;
		overflow: hidden;
		margin: 5px 20px;
	}

	.zplayer-lrc:after,.zplayer .zplayer-lrc:before {
		position: absolute;
		z-index: 1;
		display: block;
		overflow: hidden;
		content: ' ';
		width: 100%
	}

	.zplayer-lrc p {
		font-size: 14px;
		color: #666;
		line-height: 20px;
		padding: 0;
		margin: 0;
		-webkit-transition: all .5s ease-out;
		transition: all .5s ease-out;
		opacity: .4;
		height: 20px!important;
		overflow: hidden;
	}

	.zplayer-lrc p.zplayer-lrc-current {
		opacity: 1;
		overflow: visible;
		height: auto!important;
		min-height: 20px;
	}

	.zplayer-lrc .zplayer-lrc-contents {
		width: 100%;
		-webkit-transition: all .5s ease-out;
		transition: all .5s ease-out
	}


	.zplayer-fixed .zplayer{
		transform: translateX(-330px);
	}

	.zplayer-fixed .zlrc{
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
	}
	.zplayer-fixed .zplayer-pic{
		height: 60px;
		width: 60px;
	}
	.zplayer-fixed .zplayer-info{
		height: 60px;
		margin-left: 60px;
	}
	.zplayer-fixed .zplayer .zplayer-content{
		border-left: none;
		border-right: none;
		width: 330px;
	}

	.zplayer-fixed .zplayer-lrc p{
		color: #3da0ff;
	}
	.zplayer-fixed .zplayer .zplayer-list{
		border-bottom: none;
	}


</style>
<style>
	button{
		padding: 0;
		background-color: white;
		box-sizing: border-box;
	}
	.icon-play{
		height: 14.8px;
		border-style: solid;
		border-width: 7.4px 0 7.4px 12px;
		border-color: transparent transparent transparent black;
		transition: all .5s ease;
	}
	.icon-play:hover{
		border-style: double;
		border-width: 0px 0px 0px 12px;
	}
	.icon-pause{
		height: 14.8px;
		border-style: double;
		border-width: 0px 0px 0px 12px;
		border-color: #202020;
	}
</style>

</body>
<script type="text/javascript">
	function zplayer(e) {
		this.isMobile = navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i),
		this.isMobile && (e.autoPlay = !1);
		var a = {
			autoPlay: !1,
			lrcStart: !1,
			showLrc: !1,
			fixed: !1,
			listFolded: !1,
			listMaxHeight: 240
		};
		for (var t in a) {
			a.hasOwnProperty(t) && !e.hasOwnProperty(t) && (e[t] = a[t])
		}
		this.option = e

	}
	zplayer.prototype.init = function() {
		var p = this, y, cur_m = 0, m="", musicListHtml="",ht="";
		this.element = this.option.element;
		this.musics = this.option.musics;
		this.playstate = "false";
		for (var i = 0; i < this.musics.length; i++) {
			i == 0 ? musicListHtml += '<li class="playing" index="' + i + '">' + this.musics[i].title + "&nbsp; - &nbsp;" + this.musics[i].author + "</li>" : musicListHtml += '<li index="' + i + '">' + this.musics[i].title + "&nbsp; - &nbsp;" + this.musics[i].author + "</li>"
		}
		ht+= '<div class="zplayer">'
				+'	<div class="zplayer-content">'
				+'		<div class="zplayer-pic">'
				+'			<img src="' + this.musics[0].pic + '">'
				+'		</div>'
				+'		<div class="zplayer-info">'
				+'			<div class="zplayer-music">'
				+'				<span class="zplayer-title">' + this.musics[0].title + '</span>'
				+'				<span class="zplayer-author"> - ' + this.musics[0].author + '</span>'
				+'				<i class="zplayer-list-btn icon icon-reorder">'
				+'				</i>'
				+'			</div>';
		if(!this.option.fixed){
			ht+= this.option.showLrc ? '<div class="zlrc">' : '<div class="zlrc" style="display:none">';
			ht+= '	<div class="zplayer-lrc">'
					+'		<div class="zplayer-lrc-contents" style="transform: translateY(0);">'
					+'		</div>'
					+'	</div>'
					+'</div>';
		}
		ht+= '			<div class="zplayer-controller">'
				+'				<div class="zplayer-bar-wrap">'
				+'					<div class="zplayer-bar">'
				+'						<div class="zplayer-loaded" style="width: 0"></div>'
				+'						<div class="zplayer-played" style="width: 0">'
				+'							<span class="zplayer-thumb"></span>'
				+'						</div>'
				+'					</div>'
				+'				</div>'
				+'				<div class="zplayer-time">'
				+'					<span class="zplayer-ptime">00:00</span>/'
				+'					<span class="zplayer-dtime">00:00</span>'
				+'					<div class="zplayer-menu-bars">'
				//+'						<i class="icon icon-backward"></i>'
				+'						<button id="icon-play" class="icon-play"></button>'
				+'						<button id="icon-pause" class="icon-pause display-none"></button>'
				//+'						<i class="icon icon-forward"></i>'
				+'					</div>'
				+'					<div class="zplayer-menu-volume">';
		ht += this.isMobile ? '' : '<i class="volume-icon icon icon-volume-up"></i><div class="zplayer-volume-bar"><div class="zplayer-volume-played" style="width:80%"><span class="zplayer-volume-thumb"></span></div></div>';
		ht += this.option.lrcStart ? (this.option.showLrc ? '<i class="lrc-icon icon icon-list-alt"></i>' : '<i class="lrc-icon icon icon-list-alt lrc-hide"></i>') : '';
		ht +='					</div>'
				+'				</div>'
				+'			</div>'
				+'		</div>'
				+'	</div>';
		ht += this.option.fixed ? '<div class="ss-btn"><i class="icon icon-chevron-left display-none"></i><i class="icon icon-chevron-right"></i></div>' : '';
		ht += this.option.listFolded ? '<ol style="max-height:0px;" class="zplayer-list">' + musicListHtml + '</ol>' : '<ol style="max-height:'+this.option.listMaxHeight+'px;" class="zplayer-list">' + musicListHtml + '</ol>';
		ht += '</div>';
		if(this.option.fixed){
			ht+= this.option.showLrc ? '<div class="zlrc">' : '<div class="zlrc" style="display:none">';
			ht+= '	<div class="zplayer-lrc">'
					+'		<div class="zplayer-lrc-contents" style="transform: translateY(0);">'
					+'		</div>'
					+'	</div>'
					+'</div>';
		}
		this.element.innerHTML=ht;
		if(this.option.fixed){
			this.element.classList.add("zplayer-fixed");
		}
		if (this.option.lrcStart) {
			this.lrc = l(this.musics[0].lrc);
			if(this.option.showLrc){
				this.element.classList.add("zplayer-withlrc");
			}
			this.lrcContents = this.element.getElementsByClassName("zplayer-lrc-contents")[0];
			for (d = 0; d < this.lrc.length; d++){
				m += "<p>" + this.lrc[d][1] + "</p>";
			}
			this.lrcContents.innerHTML = m;
			this.lrcIndex = 0;
			this.lrcContents.getElementsByTagName("p")[0].classList.add("zplayer-lrc-current");
		}

		this.audio = document.createElement("audio");
		this.audio.src = this.musics[0].url;
		this.audio.loop = 0;
		this.audio.preload = "metadata";
		this.audio.volume = 0.8;
		this.audio.addEventListener("durationchange", function() {
			1 !== p.audio.duration && (p.element.getElementsByClassName("zplayer-dtime")[0].innerHTML = p.secondToTime(p.audio.duration))
		}),
				this.audio.addEventListener("loadedmetadata", function() {
					p.loadedTime = setInterval(function() {
						if (p.audio.buffered.length > 0) {
							var e = p.audio.buffered.end(p.audio.buffered.length - 1) / p.audio.duration;
							p.updateBar.call(p, "loaded", e, "width");
							1 === e && clearInterval(p.loadedTime);
						}
					}, 500)
				})
		this.audio.addEventListener("ended", function() {
			cur_m = ((cur_m + 1) == p.musics.length) ? 0 : cur_m + 1;
			playSwitch(cur_m)
		})
		this.audio.addEventListener("error", function() {
			p.element.getElementsByClassName("zplayer-author")[0].innerHTML = " - 加载失败 ╥﹏╥";
			p.element.getElementsByClassName("zplayer-dtime")[0].innerHTML = "00:00";
			p.PauseButton.classList.add("display-none");
			p.PlayButton.classList.remove("display-none")
		})
		this.PlayButton = this.element.getElementsByClassName("icon-play")[0];
		this.PauseButton = this.element.getElementsByClassName("icon-pause")[0];
		this.volumeIcon = this.element.getElementsByClassName("volume-icon")[0];
		this.lrcIcon = this.element.getElementsByClassName("lrc-icon")[0];
		this.hidePlayerButton = this.element.getElementsByClassName("icon-chevron-left")[0];
		this.showPlayerButton = this.element.getElementsByClassName("icon-chevron-right")[0];
		this.musicList = this.element.getElementsByClassName("zplayer-list")[0].getElementsByTagName("li");
		this.playedBar = this.element.getElementsByClassName("zplayer-played")[0];
		this.loadedBar = this.element.getElementsByClassName("zplayer-loaded")[0];
		this.thumb = this.element.getElementsByClassName("zplayer-thumb")[0];
		this.bar = this.element.getElementsByClassName("zplayer-bar")[0];
		this.volumeThumb = this.element.getElementsByClassName("zplayer-volume-thumb")[0];
		this.volumeBar = this.element.getElementsByClassName("zplayer-volume-bar")[0];
		this.volumePlayedBar = this.element.getElementsByClassName("zplayer-volume-played")[0];
		this.listButton = this.element.getElementsByClassName("zplayer-list-btn")[0];
		this.playerList = this.element.getElementsByClassName("zplayer-list")[0];

		for (var i = 0; i < this.musicList.length; i++) {
			this.musicList[i].addEventListener("click", function() {
				cur_m=parseInt(this.getAttribute("index"));
				playSwitch(cur_m);

			})
		}
		this.PlayButton.addEventListener("click", function() {
			p.play.call(p)
		})
		this.PauseButton.addEventListener("click", function() {
			p.pause.call(p)
		})
		if(!this.isMobile){
			this.volumeIcon.addEventListener("click", function() {
				p.audio.muted ? (p.audio.muted = !1,
						p.volumeIcon.className = 0.8 <= p.audio.volume ? "volume-icon icon icon-volume-up" : "volume-icon icon icon-volume-down",
						p.updateBar.call(p, "volumePlayed", p.audio.volume, "width")) : (p.audio.muted = !0,
						p.volumeIcon.className = "volume-icon icon icon-volume-off",
						p.updateBar.call(p, "volumePlayed", 0, "width"))
			})
		}
		if(this.option.lrcStart){
			this.lrcIcon.addEventListener("click", function() {
				this.classList.contains("lrc-hide") ? (p.element.classList.add("zplayer-withlrc"),this.classList.remove("lrc-hide"),p.element.getElementsByClassName("zlrc")[0].style.display="block") : (p.element.classList.remove("zplayer-withlrc"),this.classList.add("lrc-hide"),p.element.getElementsByClassName("zlrc")[0].style.display="none");
			})
		}
		if(this.option.fixed){
			this.hidePlayerButton.addEventListener("click", function() {
				p.element.getElementsByClassName("zplayer")[0].style.transform = "translateX(-330px)";
				p.hidePlayerButton.classList.add("display-none");
				p.showPlayerButton.classList.remove("display-none")
			})
			this.showPlayerButton.addEventListener("click", function() {
				p.element.getElementsByClassName("zplayer")[0].style.transform = "translateX(0)";
				p.showPlayerButton.classList.add("display-none");
				p.hidePlayerButton.classList.remove("display-none")
			})
		}

		this.bar.addEventListener("click", function(e) {
			var a = e || window.event;
			y = p.bar.clientWidth;
			var i = (a.clientX - t(p.bar)) / y;
			p.updateBar.call(p, "played", i, "width");
			p.element.getElementsByClassName("zplayer-ptime")[0].innerHTML = p.secondToTime(i * p.audio.duration);
			p.audio.currentTime = parseFloat(p.playedBar.style.width) / 100 * p.audio.duration
		})
		this.thumb.addEventListener("mousedown", function() {
			y = p.bar.clientWidth;
			clearInterval(p.playedTime);
			document.addEventListener("mousemove", e);
			document.addEventListener("mouseup", a)
		})
		if(!this.isMobile){
			this.volumeThumb.addEventListener("mousedown", function() {
				y = p.volumeBar.clientWidth;
				document.addEventListener("mousemove", voe);
				document.addEventListener("mouseup", voa)
			})
		}
		if(!this.isMobile){
			this.volumeBar.addEventListener("click", function(e) {
				var a = e || window.event;
				y = p.volumeBar.clientWidth;
				i = (a.clientX - t(p.volumeBar)) / y;
				p.volumeIcon.className = 0.8 <= i ? "volume-icon icon icon-volume-up" : (i==0 ? "volume-icon icon icon-volume-off" : "volume-icon icon icon-volume-down")
				p.audio.volume = i;
				p.updateBar.call(p, "volumePlayed", i, "width");
			})
		};
		this.listButton.addEventListener("click", function(e) {
			(p.playerList.style.maxHeight == "" || p.playerList.style.maxHeight == "0px") ? p.playerList.style.maxHeight = p.option.listMaxHeight+"px" : p.playerList.style.maxHeight = "0px"
		})


		this.option.autoPlay && this.play();

		function e(e) {
			var a = e || window.event, i = (a.clientX - t(p.bar)) / y;
			i = i > 0 ? i : 0;
			i = 1 > i ? i : 1;
			p.updateBar.call(p, "played", i, "width");
			p.option.lrcStart && p.updateLrc.call(p, parseFloat(p.playedBar.style.width) / 100 * p.audio.duration);
			p.element.getElementsByClassName("zplayer-ptime")[0].innerHTML = p.secondToTime(i * p.audio.duration)
		}
		function a() {
			document.removeEventListener("mouseup", a);
			document.removeEventListener("mousemove", e);
			p.audio.currentTime = parseFloat(p.playedBar.style.width) / 100 * p.audio.duration;
			p.play()
		}
		function t(e) {
			for (var a, t = e.offsetLeft, i = e.offsetParent; null !== i; ) {
				t += i.offsetLeft,
						i = i.offsetParent
			}
			return a = document.body.scrollLeft + document.documentElement.scrollLeft,
			t - a
		}
		function i(e) {
			for (var a, t = e.offsetTop, i = e.offsetParent; null !== i; ) {
				t += i.offsetTop,
						i = i.offsetParent
			}
			return a = document.body.scrollTop + document.documentElement.scrollTop,
			t - a
		}
		function voe(e) {
			var a = e || window.event
					, i = (a.clientX - t(p.volumeBar)) / y;
			i = i > 0 ? i : 0;
			i = 1 > i ? i : 1;
			if(p.audio.muted){
				p.audio.muted = !1;
			}
			p.audio.volume = i;
			p.updateBar.call(p, "volumePlayed", i, "width");
			if (i >= 0.8) {
				p.volumeIcon.classList.remove("icon-volume-down", "icon-volume-off");
				p.volumeIcon.classList.add("icon-volume-up")
			} else {
				if (i == 0) {
					p.volumeIcon.classList.remove("icon-volume-down", "icon-volume-up");
					p.volumeIcon.classList.add("icon-volume-off")
				} else {
					p.volumeIcon.classList.remove("icon-volume-off", "icon-volume-up");
					p.volumeIcon.classList.add("icon-volume-down")
				}
			}
		}
		function voa() {
			document.removeEventListener("mousemove", voe);
		}
		function l(e) {
			if (e) {
				for (var t = (e = e.replace(/([^\]^\n])\[/g, function(e, t) {
					return t + "\n["
				})).split("\n"), n = [], i = t.length, a = 0; a < i; a++) {
					var r = t[a].match(/\[(\d{2}):(\d{2})(\.(\d{2,3}))?]/g)
							, o = t[a].replace(/.*\[(\d{2}):(\d{2})(\.(\d{2,3}))?]/g, "").replace(/<(\d{2}):(\d{2})(\.(\d{2,3}))?>/g, "").replace(/^\s+|\s+$/g, "");
					if (r)
						for (var s = r.length, l = 0; l < s; l++) {
							var u = /\[(\d{2}):(\d{2})(\.(\d{2,3}))?]/.exec(r[l])
									, c = 60 * u[1] + parseInt(u[2]) + (u[4] ? parseInt(u[4]) / (2 === (u[4] + "").length ? 100 : 1e3) : 0);
							n.push([c, o])
						}
				}
				return (n = n.filter(function(e) {
					return e[1]
				})).sort(function(e, t) {
					return e[0] - t[0]
				}),
						n
			}
			return [[0,"暂无歌词，请您欣赏"]]
		}
		function playSwitch(i) {
			p.PlayButton.classList.add("display-none");
			p.PauseButton.classList.remove("display-none");
			p.element.getElementsByClassName("zplayer-pic")[0].getElementsByTagName("img")[0].src = p.musics[i].pic;
			p.element.getElementsByClassName("zplayer-title")[0].innerHTML = p.musics[i].title;
			p.element.getElementsByClassName("zplayer-author")[0].innerHTML = " - " + p.musics[i].author;
			p.element.getElementsByClassName("zplayer-list")[0].getElementsByClassName("playing")[0].classList.remove("playing");
			p.element.getElementsByClassName("zplayer-list")[0].getElementsByTagName("li")[i].classList.add("playing");
			if (p.option.lrcStart) {
				p.lrcContents.innerHTML = "";
				p.lrcContents.style.transform = "translateY(0px)";
				m = "";
				p.lrc = l(p.musics[i].lrc);
				for (d = 0; d < p.lrc.length; d++) {
					m += "<p>" + p.lrc[d][1] + "</p>";
					p.lrcContents.innerHTML = m;
					p.lrcIndex = 0;
					p.lrcContents.getElementsByTagName("p")[0].classList.add("zplayer-lrc-current");
				}
			}
			clearInterval(p.loadedTime);
			clearInterval(p.playedTime);
			p.audio.src = p.musics[i].url;
			p.audio.play();
			p.playedTime = setInterval(function() {
				p.updateBar.call(p, "played", p.audio.currentTime / p.audio.duration, "width"),
				p.option.lrcStart && p.updateLrc.call(p),
						p.element.getElementsByClassName("zplayer-ptime")[0].innerHTML = p.secondToTime(p.audio.currentTime)
			}, 100)
		}
	}
	zplayer.prototype.play = function() {
		this.PlayButton.classList.add("display-none");
		this.PauseButton.classList.remove("display-none");
		this.audio.play();
		this.playstate = true;
		var e = this;
		this.playedTime = setInterval(function() {
			e.updateBar.call(e, "played", e.audio.currentTime / e.audio.duration, "width");
			e.option.lrcStart && e.updateLrc.call(e),
					e.element.getElementsByClassName("zplayer-ptime")[0].innerHTML = e.secondToTime(e.audio.currentTime)
		}, 100)
	}
	zplayer.prototype.pause = function() {
		this.PauseButton.classList.add("display-none");
		this.PlayButton.classList.remove("display-none");
		this.audio.pause();
		this.playstate = false;
		clearInterval(this.playedTime)
	}
	zplayer.prototype.updateBar = function(e, a, t) {
		a = a > 0 ? a : 0,
				a = 1 > a ? a : 1,
				this[e + "Bar"].style[t] = 100 * a + "%"
	}
	zplayer.prototype.updateLrc = function(e) {
		if (e || (e = this.audio.currentTime),
		e < this.lrc[this.lrcIndex][0] || ( this.lrcIndex == this.lrc.length-1 ? false : e >= this.lrc[this.lrcIndex + 1][0] ) )
			for (var a = 0; a < this.lrc.length; a++)
				e >= this.lrc[a][0] && (!this.lrc[a + 1] || e < this.lrc[a + 1][0]) && (this.lrcIndex = a,
						this.lrcContents.style.transform = "translateY(" + 20 * -this.lrcIndex + "px)",
						this.lrcContents.getElementsByClassName("zplayer-lrc-current")[0].classList.remove("zplayer-lrc-current"),
						this.lrcContents.getElementsByTagName("p")[a].classList.add("zplayer-lrc-current"))
	}
	zplayer.prototype.secondToTime = function(e) {
		var a = function(e) {
			return 10 > e ? "0" + e : "" + e
		}
				, t = parseInt(e / 60)
				, i = parseInt(e - 60 * t);
		return a(t) + ":" + a(i)
	}
	function onRestoreData(data){
		var arr = data.split('@@@');
		zp1.audio.currentTime = parseFloat(arr[0]);
		if(arr[1]=="true"){
			document.getElementById("icon-play").click();
		}else{
		}
		return;
	}
	function onSaveData(){
		var state = String(zp1.playstate);
		if(state=="true"){
			document.getElementById("icon-pause").click();
		}
		var ans = zp1.audio.currentTime+'@@@'+state;
		return ans;
	}

</script>
<script>
	var zp1 = new zplayer({
		element: document.getElementById("player1"),
		musics: [{
			title: "What I Want Is",
			author: "E-Girls",
			url: "https://music.163.com/song/media/outer/url?id=562594329.mp3",
			pic: "http://p1.music.126.net/t633x_KG8Zcd6SNf7xZdYA==/109951163142569560.jpg?param=300x300"
		}]

	})
	zp1.init();
</script>
</html>